<template>
  <div>
    <div class="example">
      <div class="my-button" @click.stop="trigger">123</div>
      <div class="my-popper" v-show="isShow">666</div>
    </div>
    <p class="place">div</p>
  </div>
</template>

<script>
import mySelect from './select.vue';
import mySelectItem from './select-item.vue'
import Popper from 'popper.js'
import Tooltip from 'tooltip.js'
export default {
  components: {
    mySelect,
    mySelectItem
  },
  data () {
    return {
      s_value: null,
      s_data: [
        {
          value: 1,
          name: 'aaa'
        },
        {
          value: 2,
          name: 'bbb'
        }
      ],
      isShow: true
    }
  },
  mounted () {
    var reference = document.querySelector('.my-button');
    var popper = document.querySelector('.my-popper');
    var anotherPopper = new Popper(
      reference,
      popper,
      {
        placement: 'bottom',
        onCreate: (data) => {
          this.isShow = false
        },
        onUpdate: (data) => {
          console.log(444)
        },
        modifiers: {
        },
      }
    );
  },
  methods: {
    trigger () {
      this.isShow = !this.isShow
    },
    do () {
      this.isShow = false
    }
  },
  watch: {
    isShow (n, o) {
      if (n) {
        document.addEventListener('click', this.do)
      } else {
        document.removeEventListener('click', this.do)
      }
    }
  }
}
</script>

<style>
.my-button {
  width: 240px;
}
.example {
  -webkit-order: 1;
  -ms-order: 1;
  order: 1;
  position: relative;
  min-height: 450px;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-content: center;
  align-items: center;
}
.my-button {
  width: 100px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  padding: 20px;
  border-style: dotted;
  border-color: white;
  border-width: medium;
}
.my-popper {
  background: #ffc107;
  color: black;
  width: 150px;
  border-radius: 3px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  padding: 10px;
  text-align: center;
}
.place{
  width: 100px;
  height: 1200px;
}
</style>